import View360, { ControlBar } from "@site/src/components/View360";
import OptionDescriptor from "@site/src/components/OptionDescriptor";

<OptionDescriptor type="boolean | ControlBarItemOptions" defaultVal="true" added="4.0.0" />

Displays the video volume adjustment button.
If `true`, it'll show the button & apply the default options.
If `false`, it won't display the button.
You can also set detailed options by setting a object of type [ControlBarItemOptions](/docs/api/Plugin/Interface/ControlBarItemOptions).

## Example
Below is an example of not displaying a button.

<View360
  projectionOptions={{
    src: "/pano/equirect/burano.mp4",
    video: true
  }}
  showControlBar={{ volumeButton: false }}
  license="burano" />

```js
import { ControlBar } from "@egjs/view360";

new ControlBar({
  volumeButton: false
})
```

Below is an example of a button displaying in a different location.

<View360
  projectionOptions={{
    src: "/pano/equirect/burano.mp4",
    video: true
  }}
  showControlBar={{ volumeButton: {
    position: ControlBar.POSITION.MAIN_LEFT
  } }}
  license="burano" />

```js
import { ControlBar } from "@egjs/view360";

new ControlBar({
  volumeButton: {
    position: ControlBar.POSITION.MAIN_LEFT,
  }
})
```
